<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/setting.css" />
</head>
<body class="gray loading">
	<header class="mui-bar mui-bar-transparent inf">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back"><span></span></a>
	    <h1 class="mui-title" style="color: #FFF;">编辑资料</h1>
	</header>
	<div class="mui-content information" id="vueMain">
	    <div class="top-head">
	    		<img src="../icon/information.png" class="maximg"  alt="" />
	    		<div class="head-img">
	    			<img :src="list.user.head_img" id="editHead" alt="" />
	    			<div id="username" class="openw">{{list.user.name||list.user.mobile}}</div>
	    			<div id="usermark" class="openw">{{list.user.mark}}</div>
	    		</div>
	    </div>
	    <div class="information-list">
	    		<ul class="mui-table-view">
	    		        <li class="mui-table-view-cell" id="sex">
	    		            <a class="mui-navigate-right">
	    		            		<span class="mui-pull-right">{{list.user.sex}}</span>
	    		                性别
	    		            </a>
	    		        </li>
	    		        <li class="mui-table-view-cell" id="birthday">
	    		            <a class="mui-navigate-right">
	    		            		<span class="mui-pull-right">{{list.user.birthday}}</span>
	    		                 生日
	    		            </a>
	    		        </li>
	    		        <li class="mui-table-view-cell" id="pac">
	    		            <a class="mui-navigate-right">
	    		            		<span class="mui-pull-right">{{list.user.provincename}} {{list.user.cityname}}</span>
	    		                 区域
	    		            </a>
	    		        </li>
	    		        <li class="mui-table-view-cell" id="job">
	    		            <a class="mui-navigate-right">
	    		            		<span class="mui-pull-right">{{list.user.jobnameu}}</span>
	    		                职业
	    		            </a>
	    		        </li>
	    		        <!--<li class="mui-table-view-cell "  >
	    		            <a class="mui-navigate-right">
	    		            		<span class="mui-pull-right">型男，武术..</span>
	    		                 个人标签
	    		            </a>
	    		        </li>-->
	    		        <!--<li class="mui-table-view-cell">
	    		        		<span class="mui-pull-right">123456</span> 
	    		            用户ID
	    		        </li>-->
	    		        
	    		    </ul>
	    </div>
	</div>
	
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#" class="callCamera">照相机</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#" class="callalbum">相册</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, user;
	mui.init({
		beforeback:function(){
			//在这里提交吧；
//			bexta.jsonToString(apps.list.user.head_img)
			var sendData = {
				uid:apps.list.user.uid,
				sex:apps.list.user.sex,
				birthday:apps.list.user.birthday,
				province:apps.list.user.province,
				city:apps.list.user.city,
				job:apps.list.user.job_id,
				mark:apps.list.user.mark,
				name:apps.list.user.name,
				photo:apps.upimg
			};
			var sn = {
					uid:apps.list.user.uid,
					head_img:apps.list.user.head_img,
					mobile:apps.list.user.mobile,
					name:apps.list.user.name,
					mark:apps.list.user.mark,
					qq_id:user.qq_id || 0,
					wx_id:user.wx_id || 0,
					weibo_id:user.weibo_id || 0
			};
			bexta.ajax(api.save_user, function(res, msg){
				bexta.setStorage(USER,sn);
				mui.fire(plus.webview.getWebviewById('center'), 'toggleUserInfomation');
			},{data:sendData});
			
			return true;
		}
	});
	 mui.ready(function () {
	   document.querySelector('.mui-bar-transparent').style.height = (44 + bexta.getStatusHeight()) + 'px';	
	   document.querySelector('.mui-bar .mui-icon').style.paddingTop = (10 + bexta.getStatusHeight()) + 'px';	
	   document.querySelector('.mui-bar .mui-title').style.lineHeight = (44 + bexta.getStatusHeight()) + 'px';	
	});
	mui.plusReady(function () {
	    user = bexta.getStorage(USER);
	    views = bexta.getWebview();
//	    bexta.jsonToString(user)
	    bexta.ajax(api.user_infor, function(res){
	    		initVue(res);
	    }, {data:{uid:user.uid}});
	});
	function initVue(res){
		apps = new Vue({
			el:'#vueMain',
			data:{
				list:res,
				upimg:'',
				job_id:res.user.job_id.split(','),
				job_name:[res.user.jobnameu]
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				var self = this;
				if( self.list.user.birthday != '0000-00-00' ){
					var defBirthday = self.list.user.birthday.split('-').join('/');
					defBirthday = new Date(defBirthday);
				}else{
					var defBirthday = ''
				}
				//性别
				var picker = new mui.PopPicker({layer:1, buttons:['取消','确定']});
				picker.setData([{value:"男", text:"男"}, {value:"女", text:"女"}]);
				if( self.list.user.sex != '' ){
					picker.pickers[0].setSelectedValue(self.list.user.sex);
				}
			 	document.querySelector('#sex').addEventListener('tap', function(){
			 		var that = this;
			 		picker.show(function(item){
			 			self.list.user.sex = item[0].text;
			 		});
			 	});
			 	//生日
			 	document.querySelector('#birthday').addEventListener('tap', function(){
			 		plus.nativeUI.pickDate(function(evt){
			 			self.list.user.birthday = bexta.getDate([evt.date])[0].fullDate;
			 		},function(){},{title:"生日设定",date:defBirthday});
			 	});
			 	
			 	//区域
			 	var pacPicker  = new mui.PopPicker({layer:2, buttons:['取消','确定']});
			 	pacPicker.setData(self.list.citylist);
			 	if(self.list.province != 0){
			 		//设定默认值
			 		pacPicker.pickers[0].setSelectedValue(self.list.user.province)
			 	}
			 	document.querySelector('#pac').addEventListener('tap', function(){
			 		var that = this;
			 		pacPicker.show(function(item){
						self.list.user.province = item[0].value;
						self.list.user.city = item[1].value;
						self.list.user.provincename = item[0].text;
						self.list.user.cityname = item[1].text;
			 		});
			 	});
			 	//选择职业
			 	document.querySelector('#job').addEventListener('tap', function(){
			 		bexta.openWithTitle({
						id:'occupation',
						url:'occupation.html',
						extras:{
							val:self.list.jonlist,
							def:self.job_id
						}
					},{
						title:{
							text:' 选择职业'
						}
					});
			 	});
				//更改姓名和说明
				mui('#vueMain').on('tap', '.openw', function(){
					var id = this.id;
					bexta.openWithTitle({
						id:'white',
						url:'../include/white.html',
						extras:{
							flag:id,
							def:id=='username'?apps.list.user.name:apps.list.user.mark
						},
						show:{autoShow:true,aniShow:'slide-in-bottom'}
					},{
						title:{
							text:id=='username'?'更改名称':'个姓签名'
						}
					})
				});
				//头象处理  uploadImage:function(files, extras, tips, url)
				document.querySelector('#editHead').addEventListener('tap', function(){
			   		mui('#sheet1').popover('toggle');
			   	});
			   	//相机
				mui('#sheet1').on('tap', '.callCamera', function() {
					var self = this;
					var cam = plus.camera.getCamera();
					cam.captureImage(function(p){
						plus.io.resolveLocalFileSystemURL(p, function(entry){
							plus.zip.compressImage({
								src:entry.toLocalURL(),
								dst:'_doc/b.jpg',
								overwrite:true,
								format:'jpg',
								quality:50,
								width:'480px',
								height:'auto'
							}, function(evt){
								mui.openWindow({
									id:'cropperPic',
									url:"../include/cropperPic.html",
									extras:{
										imgSrc:evt.target
									},
									show:{aniShow:"pop-in"},
									waiting:{autoShow:false}
								});
							});
						}, function(e){
							mui.toast('读取拍照文件错误');
						});
					},function(err){
						if( err.code != 2 ){
							mui.toast('err:'+err.code+', 照相失败');
						}
					},{
						format:'jpg',
						index:"1"
					})
					mui('#sheet1').popover('toggle');
				});
				//相册
				mui('#sheet1').on('tap', '.callalbum', function() {
					plus.gallery.pick(function(file){
						plus.zip.compressImage({
								src:file,
								dst:'_doc/b.jpg',
								overwrite:true,
								format:'jpg',
								quality:50,
								width:'480px',
								height:'auto'
							}, function(evt){
								mui.openWindow({
									id:'cropperPic',
									url:"../include/cropperPic.html",
									extras:{
										imgSrc:evt.target
									},
									show:{aniShow:"pop-in"},
									waiting:{autoShow:false}
								});
							});
					}, function(){
				
						//TODO。 。。
					},{
						maximum:1
					})					
					mui('#sheet1').popover('toggle');
				});
				
				
				
			 	
			}
		});
	}
window.addEventListener('callVal', function(evt){
	var v = evt.detail.val;
	apps.list.user.job_id = "";
	apps.list.user.jobnameu = "";
	apps.job_id = [];
	apps.job_name = [];
	apps.job_id=v;
	mui.each(apps.list.jonlist, function(){
		var self = this;
		mui.each( v, function(){
			if( self.id == this ){
				apps.job_name.push(self.name);
			}
		} )
	});
	apps.list.user.job_id = apps.job_id.join(',');
	apps.list.user.jobnameu = apps.job_name.join(',');
});
window.addEventListener('setMarkAndName', function(evt){
	var sid = evt.detail.sid,
		val = evt.detail.val;
	if( sid == 'username' ){
		apps.list.user.name = val;
	}else{
		apps.list.user.mark = val;
	}
});
window.addEventListener('cropperImg', function(evt){
	apps.list.user.head_img = evt.detail.resImg .true_url;
	apps.upimg = evt.detail.resImg .true_path;
});
</script>
</body>
</html>